<template>
  <div class="app-container">
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="formInline" label-width="150px">
          <el-form-item>
            <el-button type="primary" @click.prevent="handleHistory">历史列表</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-table
        :data="skulist"
        v-loading="skulistLoading"
        ref="multipleTable"
        border
        style="width: 100%; margin-top: 20px"
        tooltip-effect="dark"
      >
        <el-table-column prop="ProductId" label="商品ID" align="center"></el-table-column>
        <el-table-column prop="SKUName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="Specification" label="规格" align="center"></el-table-column>
        <!-- <el-table-column prop="SuggestNumber" label="建议订货数量" align="center"></el-table-column> -->
        <!--<el-table-column prop="OrderNum" label="订货数量" align="center">
					<template slot-scope="scope">
						<el-input-number v-model="scope.row.OrderNum" size='mini' :precision="2" :step="0.1"></el-input-number>
        </template>-->
        <!--<el-table-column prop="ArrivalNumber" label="应到货数量" align="center">-->
        <!--	</el-table-column>-->
        <el-table-column prop="SKUUnitNo" label="单位" align="center"></el-table-column>
        <el-table-column prop="PackWeight" label="包重量" align="center"></el-table-column>
        <el-table-column prop="SKUSalePrice" label="销售价" align="center"></el-table-column>
        <el-table-column prop="SKUWholesalePrice" label="批发价" align="center"></el-table-column>
        <el-table-column prop="NowWarehouseQty" label="当前库存数量" align="center"></el-table-column>
        <el-table-column prop="SupplierName" label="供货商" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="PurchaseOrderProductList(scope.row.SupplierId,scope.$index, scope.row)"
            >{{scope.row.SupplierName}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="商品"
        :visible.sync="shopsFormVisible"
        width="95%"
        :before-close="handleClose"
      >
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="formInline" label-width="100px">
            <el-form-item label="收货仓库:">
              <el-select
                v-model="formInline.BranchId"
                filterable
                placeholder="请选择店铺"
                @change="getshowBranchId"
              >
                <el-option
                  v-for="item in BranchList"
                  :key="item.BranchId"
                  :label="item.BranchName"
                  :value="item.BranchId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供货商名称:">
              <el-input v-model="formInline.SupplierName" disabled></el-input>
              <!--<el-select v-model="formInline.SupplierId" filterable placeholder="供货商名称" @change="getSupplierID" disabled>
								<el-option v-for="item in SupplierList" :key="item.SupplierId" :label="item.SupplierName" :value="item.SupplierId">
								</el-option>
              </el-select>-->
            </el-form-item>
            <el-form-item label="备货周期">
              <!--<el-form-item>-->
              <el-select v-model="formInline.cycle" placeholder="订货周期">
                <el-option
                  v-for="item in cycle"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!--<el-input v-model="formInline.cycle" placeholder="请输入备货周期"></el-input>-->
            </el-form-item>
            <!--<el-form-item>
							<el-button type="primary" round>确定备货周期</el-button>
            </el-form-item>-->
          </el-form>
        </el-col>

        <el-table
          :data="supplierskulist"
          v-loading="supplierskulistLoading"
          ref="multipleTable"
          border
          style="width: 100%; margin-top: 20px"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          :summary-method="getSummaries"
          show-summary
        >
          <el-table-column type="selection" width="55" align="center" label="全选"></el-table-column>

          <el-table-column prop="ProductId" label="商品ID" align="center"></el-table-column>
          <el-table-column prop="SKUName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="Specification" label="规格" align="center"></el-table-column>
          <el-table-column prop="SuggestNumber" label="建议订货数量" align="center"></el-table-column>
          <el-table-column prop="OrderNum" label="订货数量" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.OrderNum"
                size="mini"
                :precision="2"
                :step="0.1"
                @change="handlesum(scope.$index,scope.row)"
              ></el-input-number>
            </template>
            <!--<el-table-column prop="ArrivalNumber" label="应到货数量" align="center">-->
          </el-table-column>
          <el-table-column prop="SKUUnitNo" label="单位" align="center"></el-table-column>
          <el-table-column prop="PackWeight" label="包重量" align="center"></el-table-column>
          <el-table-column prop="SKUSalePrice" label="销售价" align="center"></el-table-column>
          <el-table-column prop="SKUWholesalePrice" label="批发价" align="center"></el-table-column>
          <el-table-column prop="NowWareHouseQty" label="当前库存数量" align="center"></el-table-column>
          <el-table-column prop="sum" label="合计" align="center">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.sum" size="mini" :disabled="true"></el-input-number>
            </template>
            <!--<el-table-column prop="ArrivalNumber" label="应到货数量" align="center">-->
          </el-table-column>
        </el-table>
        <!--<div>
				<el-pagination background layout=" prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right ;margin-top: 10px;">
				</el-pagination>
        </div>-->
        <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
          <el-button type="primary" @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="OderVisible= true">订货</el-button>
        </div>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="OderVisible" width="30%">
        <span>是否确认订货</span>
        <span slot="footer">
          <el-button @click="OderVisible = false">取 消</el-button>
          <el-button type="primary" @click.native="addSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <!--<div>
				<el-pagination background layout=" prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right ;margin-top: 10px;">
				</el-pagination>
      </div>-->
    </section>
  </div>
</template>

<script>
import {
  SKUList,
  GetAnySupplierList,
  PurchaseOrder,
  Store,
  PurchaseOrderProductList,
  GetOrderSugguestion
} from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      SupplierList: [
        
      ],
      BranchList: [],
      cycle: [
        {
          value: 7,
          label: "一周"
        },
        {
          value: 14,
          label: "两周"
        },
        {
          value: 30,
          label: "一月"
        }
      ],
      way: [
        {
          value: 1,
          label: "现金"
        },
        {
          value: 2,
          label: "余额"
        }
      ],
      OrderSugguestionList: [],
      supplierskulist: [],
      supplierskulistLoading: false,
      shopsLoading: false,
      shopsFormVisible: false,
      SupplierList: [],
      OderVisible: false,
      lookFormVisible: false,
      lookLoading: false,
      logisticsLoading: false,
      logisticsFormVisible: false,
      addLoading: false,
      addFormVisible: false,
      skulist: [],
      page: 1,
      pageSize: 2000,
      total: 10000000000,
      multipleSelection: [],
      addForm: {},
      logisticsForm: {},
      formInline: {
        SupplierId: "",
        cycle: 14,
        way: 2,
        BranchId: 244,
        page: 1,
        pageSize: 20,
        total: 10000000000
      }
    };
  },
  created() {
    this.getSkuList();
    this.getStoreList();
    this.GetOrderSugguestion();
  },

  methods: {
    //获得订货建议
    GetOrderSugguestion() {
      var self = this;
      var para = {
        sessionid: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        BranchId: 270,
        TimeSetting: 5
      };
      GetOrderSugguestion(para).then(res => {
        console.log(res);
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取订货建议");
          console.log(vdata);
          self.OrderSugguestionList = vdata.DataList;
          self.total = vdata.TotalCount;
        }
      });
    },

    handlesum: function(index, row) {
      console.log(index, row);
      if (row.SKUWholesalePrice == 0) {
        row.sum = row.OrderNum * row.SKUSalePrice;
        console.log(row.sum);
      } else {
        row.sum = row.OrderNum * row.SKUWholesalePrice;
      }
      this.skulist[index] = row;
    },
    //
    getshowBranchId(val) {
      this.formInline.BranchId = val;

      console.log(val);
    },
    //获取店铺列表
    getStoreList() {
      var self = this;
      var para = {
        sessionid: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize
      };
      //				para = {
      //					"": Base64.encode(JSON.stringify(para))
      //				};
      Store(para).then(res => {
        console.log(res);
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log(vdata);
          self.BranchList = vdata.DataList;
          self.total = vdata.TotalCount;
        }
      });
    },
    //显示供货商商品界面
    PurchaseOrderProductList: function(id, index, row) {
      var self = this;
      var para = {
        sessionid: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        Id: id
        //					VoucherNo: this.warehoue.VoucherNo,
      };
      this.shopsFormVisible = true;
      this.formInline = Object.assign({}, row);
      PurchaseOrderProductList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log(vdata);
          var list = vdata.DataList;
          for (var item in list) {
            list[item].OrderNum = 1;
          }
          self.supplierskulist = list;
          self.formInline.total = vdata.TotalCount;
        }
      });
    },
    //求和
    getSummaries(param) {
      const { columns, data } = param;
      //				console.log('param', param)
      //console.log('data', data)
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        if (index !== 11) {
          return;
        }
        const values = data.map(item => {
          return Number(item[column.property]);
        });
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += "元";
        }
      });

      return sums;
    },
    //得到供货商ID
    // getSupplierID(val) {
    //   this.formInline.SupplierId = val;
    // },

    //关闭页面
    handleClose(done) {
      this.shopsFormVisible = false;
      (this.formInline.page = 1),
        (this.formInline.pageSize = 20),
        this.getSkuList();
    },
    //获取商品列表
    getSkuList() {
      var self = this;
      var para = {
        sessionid: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        page: this.page,
        pagesize: this.pageSize
        //					VoucherNo: this.warehoue.VoucherNo,
      };
      this.skulistLoading = true;
      SKUList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log(vdata);
          var list = vdata.DataList;
          for (var item in list) {
            list[item].OrderNum = 1;
            list[item].Description = "";
            this

          }
          self.skulist = list;
          self.total = vdata.TotalCount;
        }
        self.skulistLoading = false;
      });
    },
    //采购订货
    addSubmit() {
      var self = this;
      if (!this.formInline.BranchId) {
        this.$message({
          message: "请选择收货仓库",
          type: "error"
        });
        self.OderVisible = false;
        return;
      }
      if (!this.formInline.cycle) {
        this.$message({
          message: "请选择订货周期",
          type: "error"
        });
        self.OderVisible = false;
        return;
      }
      var list = self.jsonspr;
      if (list.length < 1) {
        this.$message({
          message: "请选择订货商品",
          type: "error"
        });
        self.OderVisible = false;
        return;
      }
      for (var item in list) {
        if (!list[item].OrderNum) {
          list[item].OrderNum = 0;
        }
        if (!list[item].OrderNum || list[item].OrderNum <= 0) {
          this.$message({
            message: "订货数量不能为空",
            type: "error"
          });
          self.OderVisible = false;
          return;
        }
      }
      for (var item in list) {
        if (!list[item].sum) {
          list[item].sum = 0;
        }
      }
      var para = {
        sessionid: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Cycle: this.formInline.cycle,
        SupplierId: this.formInline.SupplierId,
        BranchId: this.formInline.BranchId,
        jsonspr: this.jsonspr
      };
      // 先检查

      // 循环
      for (var item in this.jsonspr) {
        this.jsonspr[item].SupplierId = this.formInline.SupplierId;
      }
      console.log(para);
      PurchaseOrder(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          //						self.formInline.cycle = 7;
          //						self.formInline.way = 2;
          self.getSkuList();
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
      });
      self.shopsFormVisible = false;
      self.OderVisible = false;
    },
    //显示历史列表界面
    handleHistory: function() {
      //				this.addFormVisible = true;
      //				this.addForm = {}
      this.$router.push({
        path: "/Oder/historylist"
      });
    },
    handleSelectionChange(val) {
      this.jsonspr = val;
      //				console.log(val)
      for (var item in this.skulist) {
        this.skulist[item].sum = 0;
      }
      if (val.length > 0) {
        //有选中项
        for (var item in val) {
          if (val[item].SKUWholesalePrice == 0) {
            val[item].sum = val[item].OrderNum * val[item].SKUSalePrice;
          } else {
            val[item].sum = val[item].OrderNum * val[item].SKUWholesalePrice;
          }
        }
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    changeNum(row) {
      for (var item in this.jsonspr) {
        if (this.jsonspr[item].ProductId == row.ProductId) {
          this.jsonspr[item] = row;
        }
      }
    },

    handleCurrentChange(val) {
      this.page = val;
      this.getSkuList();
    }
  }
};
</script>

<style>
.el-form-item--medium .el-form-item__content,
.el-form-item--medium .el-form-item__label {
  color: #333333;
}
</style>